<template>
  <el-dialog
    v-el-drag-dialog="{resize: resizeChart, updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1200px')"
    :visible="visible"
    :title="this.$t('TEST_RESULT')"
    @open="open"
    @close="close"
  >
    <div class="flex justify-between align-end">
      <div class="w-30">
        {{ $t('REFERENCE_RANGE') }}：
        {{
          curResult.targetFiberLength ? changeDecimal(curResult.targetFiberLength) + 'm' : '--'
        }}
      </div>
      <div class="w-30">
        {{ $t('THE_DISTANCE') }}： {{ changeDecimal(curResult.fiberLength) }}m
      </div>
      <div class="w-30">
        {{ $t('TEST_RESULT') }}：
        <span v-if="curResult.resultFault" class="exception">
          {{ $t('TASK_RESULT_EXCEPTION') }}
        </span>
        <span v-else>
          {{ $t('BIZ_STATUS_NORMAL') }}
        </span>
      </div>
    </div>
    <line-chart
      id="record-line"
      ref="recordLine"
      v-loading.fullscreen.lock="loading"
      class="flex-1"
      style="height: 300px"
      :row-list="[curData]"
    />
    <event-table :row-list="[curData]" :legend-select="legendSelect" />
    <template v-slot:footer>
      <el-button v-if="curResult.resultFault" @click="$debounce(locateTOGis)">{{ $t('LOCATION_TO_GIS') }}</el-button>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
    <FaultLocation :dialog-visible.sync="faultLocationShow" :params="curData" />
  </el-dialog>
</template>

<script>
  import nodeApi from '@/api/oen/NodeApi'
  import { changeDecimal, deepClone } from '@/utils/common'
  import LineChart from '@/views/module/link/record/components/chart/LineChart'
  import EventTable from '@/views/module/link/record/components/EventTable'
  import FaultLocation from './FaultLocation'
  export default {
    components: { LineChart, EventTable, FaultLocation },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      curResult: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        curData: {},
        changeDecimal: changeDecimal,
        legendSelect: {},
        loading: false,
        faultLocationShow: false
      }
    },
    methods: {
      resizeChart() {
        this.$refs.recordLine && this.$refs.recordLine.resize()
      },
      open() {
        this.loading = true
        this.legendSelect[this.curResult.portId] = true
        const curData = deepClone(this.curResult)
        curData.dataList = this.formateData(curData)
        curData.eventList = this.formateEventList(curData)
        this.curData = curData
        const _this = this
        setTimeout(() => {
          _this.$refs.recordLine.render()
          _this.loading = false
        }, 100)
        console.log(this.curResult)
      },
      formateData(res) {
        if (!res.dataList) {
          return []
        }
        const chartData = []
        res.dataList.forEach((e, i) => {
          if (i * Number(res.samplePrecision) <= Number(res.testParam.testRange)) {
            chartData.push({
              value: [changeDecimal(i * res.samplePrecision, 2), e]
            })
          }
        })
        return chartData
      },
      formateEventList(data) {
        const eventList = data.eventList || []
        eventList.sort((a, b) => a.position - b.position)
        eventList.forEach((i, index) => {
          if (data.orderIndex) {
            i.index = 0
            i.portName = data.orderIndex + '_' + (data.deviceName || data.deviceId)
            this.legendSelect[i.portName] = true
          } else {
            i.index = 1
            i.portName = this.$t('REFERENCE_CURVE_LINE')
            this.legendSelect[i.portName] = false
          }
          i.intervalLoss = '-'
          i.intervalAverageLoss = '-'
          if (index !== 0) {
            i.intervalLoss = i.linkLoss - i.eventLoss - eventList[index - 1].linkLoss
            i.intervalAverageLoss =
              (i.intervalLoss * 1000) / (i.position - eventList[index - 1].position)
          }
        })
        return eventList
      },
      close(load) {
        this.$refs.recordLine && this.$refs.recordLine.distoryChart()
        this.$emit('close')
      },
      locateTOGis() {
        // 找到该设备所在的站点，再根据测试方向确定otdr测试时，是以该站点为起点进行测试还是终点进行测试
        // testDirection = A 以该设备所在的站点为起点
        //  testDirection = Z 以该设备所在的站点为终点
        // nodeApi.find({ nodeId: this.curData.deviceId }) 这个接口获取到的设备详情不全
        if (!this.curData.cableIdList || !this.curData.cableIdList.length) {
          this.$message.error(this.$t('FAULT_LOCATION_TIP2'))
          return
        }
        nodeApi.queryPage({ keyword: this.curData.deviceId, page: { page: 1, size: 20 }}).then(res => {
          if (!res || !res.list || !res.list.length) return
          if (!res.list[0].stationId) {
            this.$message.error(this.$t('FAULT_LOCATION_TIP1'))
            return
          }
          this.faultLocationShow = true
          this.curData.startStaionId = res.list[0].stationId
          this.curData.cableId = this.curData.cableIdList[0]
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .w-30 {
    width: 33%;
    & > span {
      font-size: 24px;
      font-weight: 700;
      color: green;
      &.exception {
        color: red;
      }
    }
  }
</style>
